import { PageContainer, View } from "@tarojs/components"
import Taro, { useRouter } from "@tarojs/taro"
import { useBoolean } from "ahooks"
import { useState } from "react"

import Page from "@/components/common/Page"
import ByCell from "@/components/ui/ByCell"
import ByTabs from "@/components/ui/ByTabs"
import ByButton from "@/components/ui/ByButton"
import PaneLiving from "./components/PaneLiving"
import PaneRecord from "./components/PaneRecord"
import PopupContainer from "@/components/app/PopupContainer"

import useList from "@/hooks/useList"
import ApiFinance from "@/api/finance"

const tabs = [
  { label: "考勤信息", value: 1 },
  { label: "记录", value: 2 },
]

export default () => {

  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId);

  const [active, setActive] = useState(1)
  const [show, { setTrue, setFalse }] = useBoolean()


  const { list } = useList<{
    templateId: number
    templateName: string
  }>(ApiFinance.getWorkerPaymentTemplate)

  const navigateTo = (item) => {
    Taro.navigateTo({ url: `apply?templateId=${item.templateId}&intentCustomerId=${intentCustomerId}&workerType=${item.workerType}` })
  }

  return (
    <>
      <Page slotHeader={
        <View className="bg-white px-3 pb-2">
          <ByTabs capsule tabs={tabs} active={active} onChange={setActive} />
        </View>
      }

        footerSticky
        slotFooter={
          <ByButton className="mx-3 mt-2" size="large" onClick={setTrue}>申请工费</ByButton>
        }
      >
        {
          active === 1 ?
            <PaneLiving intentCustomerId={intentCustomerId} /> :
            <PaneRecord intentCustomerId={intentCustomerId} />
        }
      </Page>

      <PageContainer show={show} round onLeave={setFalse}>
        <PopupContainer title="工种" onCancel={setFalse}>
          <View className="px-3 pb-3">
            {
              list.map((item, index) => (
                <ByCell next border={index > 0} label={item.templateName} key={item.templateId} onClick={() => navigateTo(item)} />
              ))
            }
          </View>
        </PopupContainer>
      </PageContainer>

    </>
  )
}
